<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
		过滤器:
			定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
			语法:
				1.注册过滤器: Vue.filter(name,callback)或 new Vue{filters:{}}
				2.使用过滤器:插值语法{{xxx|过滤器名}} 或 v-bind:属性 ="xxx | 过滤器名"
			备注:
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据，是生新的对应的数据
		 -->

		<!--显示格式化后的时间
				现在是:2021-01-09
				现在是:2021-01-09 22:53:47
		-->
		<div id="root">
			<h1>显示格式化后的时间</h1>
			<h3>1.现在时间是：{{fmtTime}}</h3>
			<h3>2.现在时间是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<!-- 过滤器本质就是函数；
				捕获到这一段代码，读到time，就把time传到timeFormater（timeFormater就是一个函数，只不过其后面可以不带括号。），
				 之后vue拿到timePromater返回值，然后替换掉{{time | timeFormater}}-->
			<h3>3.现在时间是：{{time | timeFormater}}</h3>
			<!-- timeFormater后面也可以带参数，第一个参数是永远不变的time,就是管道符前面的数据；
			添加的那个参数是才是第二个。如 -->
			<h3>4.现在时间是：{{time | timeFormater('YYYY_MM_DD')}}</h3>
			<!-- 首先time传给timeFormater,然后拿到执行结果继续传给mySlice，time不会直接传给mySlice-->
			<h3>5.过滤器串联：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

			<!--过滤器第二个用法 -->
			<!-- 动态绑定msg,动态绑定的时候，我只想要msg里面的前四位。
				浏览器打开开发者工具，在最上面菜单栏中选择元素，就会发现下面这一句变成了  <h3 x=”你好，常”>6.常规古</h3>
			 -->
			<h3 :x="msg | mySlice">6.常规古</h3>
		</div>
		<div id="root2">
			<h1>{{msg | mySlice}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		/* 全局过滤器，必须在new Vue之前列出过滤器。全局的是filter，多个过滤器需要一个个列出来 */
		Vue.filter('mySlice', function(value) {
			return value.slice(0, 4)
		})
		new Vue({
			el: '#root',
			data: {
				time: 1621561377603,
				msg: "你好，常规古"
			},
			computed: {
				fmtTime() {
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				// getFmtTime() { //函数简写
				getFmtTime: function() {
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//filters过滤器写在vue中的，是个局部过滤器
			filters: {
				//timeFormater是个函数,value用来接收上面传进来的time。
				timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') { //str使用形参默认值
					return dayjs(value).format(str)
				},

			}
		})

		/* 这样就有2个vue实例 */
		new Vue({
			el: "#root2",
			data: {
				msg: "hello,尚硅谷",

			}
		})
	</script>
</html>